<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        *{
            box-sizing: border-box;
        }
        .box{
            width: 650px;
            margin: 100px auto;
            text-align: center;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
             display: flex; 
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 20px;
             position: relative;  
        }
        li{
              /* position: relative;   */
        }
        li .tire{
            width: 120px;
            height: 120px;
            border: 1px solid;
            margin-left: 10px;
            margin-top: 10px;
            
        }
        img{
             width: 150px;
            height: 150px;  
        }
        li .tire-second{
            position: absolute;
            
        }
        li:nth-child(1) .tire-second{
            top: 0px; 
            left:0px;
        }
        li:nth-child(2) .tire-second{
            top: 0px; 
            left:125px;
        }
        li:nth-child(3) .tire-second{
            top: 0px; 
            left:255px;
        }
        li:nth-child(4) .tire-second{
            top: 0px; 
            left:385px;
        }
        li:nth-child(5) .tire-second{
            top: 0px; 
            left:515px;
        }
        li:nth-child(6) .tire-second{
            top: 125px; 
            left:0px;
        }
        li:nth-child(7) .tire-second{
            top:125px; 
            left:125px;
        }
        li:nth-child(8) .tire-second{
            top: 125px; 
            left:255px;
        }
        li:nth-child(9) .tire-second{
            top: 125px; 
            left:385px;
        }
        li:nth-child(10) .tire-second{
            top: 125px; 
            left:515px;
        }
        h3{
            margin: 0;
            font-size: 25px;
            font-weight: bold;
        }
        p{
            margin: 0;
            font-size: 14px;
            font-weight: bold;
            color: #656265;
            margin-top: 15px;
            margin-bottom: 5px;
        }
        span{
            color:#5E625E;
            
        }
    </style>
</head>
<body>
     <div class="box">
         <h3>名车车标展示</h3>
         <ul>
             <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
              <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
                <li>
                    <div class="tire">
                        <p>BMW</p>
                        <span>宝马汽车</span>
                    </div>
                    <div class="tire-second">
                        <img src="" alt="">
                    </div>
                     
             </li>
         </ul>
     </div>
</body>
</html>
<script>
    var lis = document.querySelectorAll('li');
    var imgs = document.querySelectorAll('li .tire-second img');
    console.log(imgs);

    for(var i = 0;i < lis.length;i++){
        lis[i].index = i+1;
        lis[i].onmouseover = function(){
        imgs[this.index-1].src = 'img/' + this.index + '.jpg';
    }
    lis[i].onmouseout = function(){
        imgs[this.index-1].src = '';
    }
    }
</script>